<template>
  <div>
    <myDivider name="房间管理"></myDivider>
    <el-page-header @back="goBack" content="详情">
    </el-page-header>
    <!-- <div class="breadcrumbs">
      <el-breadcrumb separator-class="el-icon-arrow-right" v-model="breadcrumbsData">
        <el-breadcrumb-item v-for="item in breadcrumbsData" :key="item.id" :label="item.shortName"> <a
            @click.prevent="tiktak(item.id)">{{ item.shortName }}</a></el-breadcrumb-item>
      </el-breadcrumb>
    </div> -->

    <div class="wholePage">

      <!-- 详情 -->
      <el-form ref="reinsertForm" :model="reinsertForm" label-width="80px" :inline="true" :rules="insertRules">
        <el-form-item label="房间名称:" :label-width="formLabelWidth" class="formItemStyle" prop="name">
          <el-input disabled v-model="reinsertForm.name" autocomplete="off" style="width: 262px"></el-input>
        </el-form-item>

        <el-form-item label="所在楼宇:" :label-width="formLabelWidth" class="formItemStyle">
          <el-input disabled v-model="reinsertForm.buildingName" autocomplete="off" style="width: 262px"></el-input>
        </el-form-item>

        <el-form-item label="单元楼:" :label-width="formLabelWidth" class="formItemStyle">
          <el-select disabled v-model="reinsertForm.unitCode" placeholder="请选择" style="width: 262px;">
            <el-option v-for="item in unitCodeData" :key="item.type" :label="item.name" :value="item.type">
            </el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="房型:" :label-width="formLabelWidth" class="formItemStyle">
          <el-input disabled v-model="reinsertForm.layoutName" autocomplete="off" style="width: 262px"></el-input>
        </el-form-item>

        <el-form-item label="楼层:" :label-width="formLabelWidth" class="formItemStyle">
          <el-input disabled v-model="reinsertForm.floors" autocomplete="off" style="width: 262px"></el-input>
        </el-form-item>

        <el-form-item label="占地面积:" :label-width="formLabelWidth" class="formItemStyle">
          <el-input disabled v-model="reinsertForm.floorSpace" autocomplete="off" style="width: 262px" />
        </el-form-item>

        <el-form-item label="权属类型:" :label-width="formLabelWidth" class="formItemStyle">
          <el-input disabled v-model="reinsertForm.ownershipTypeName" autocomplete="off" style="width: 262px" />
        </el-form-item>

        <el-form-item label="装修情况:" :label-width="formLabelWidth" class="formItemStyle">
          <el-input disabled v-model="reinsertForm.decorationSituationName" autocomplete="off" style="width: 262px" />
        </el-form-item>

        <el-form-item label="房间朝向:" :label-width="formLabelWidth" class="formItemStyle">
          <el-input disabled v-model="reinsertForm.towardName" autocomplete="off" style="width: 262px" />
        </el-form-item>

        <el-form-item label="房屋归属:" :label-width="formLabelWidth" class="formItemStyle">
          <el-input disabled v-model="reinsertForm.ownershipName" autocomplete="off" style="width: 262px" />
        </el-form-item>

        <el-form-item label="产权证书:" :label-width="formLabelWidth" class="formItemStyle">
          <el-input disabled v-model="reinsertForm.roomCertificateFormName" autocomplete="off" style="width: 262px" />
        </el-form-item>
        <el-form-item label="房产证:" :label-width="formLabelWidth" class="formItemStyle" >
          <el-select v-model="reinsertForm.hasOwnershipCertificate" placeholder="请选择" disabled style="width: 262px;">
            <el-option label="没有" :value="0"></el-option>
            <el-option label="有" :value="1"></el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="证书编号:" :label-width="formLabelWidth" class="formItemStyle">
          <el-input disabled v-model="reinsertForm.certificateNumber" autocomplete="off"
            style="width: 262px"></el-input>
        </el-form-item>

        <el-form-item label="房主姓名:" :label-width="formLabelWidth" class="formItemStyle">
          <el-input disabled v-model="reinsertForm.ownerName" autocomplete="off" style="width: 262px"></el-input>
        </el-form-item>
        <el-form-item label="是否是公共区域" :label-width="formLabelWidth" class="formItemStyle">
          <template>
            <el-radio disabled v-model="reinsertForm.isPublic" :label="0">私人区域</el-radio>
            <el-radio disabled v-model="reinsertForm.isPublic" :label="1">公共区域</el-radio>
          </template>
        </el-form-item>
      </el-form>
      <!-- 详情结束 -->

      <!-- 分割线 -->
      <el-divider></el-divider>



      <!-- tab页 -->

      <!-- tab页结束 -->





    </div>
  </div>
</template>





<script>
import AMapLoader from '@amap/amap-jsapi-loader';
import {
  getDictionaryList,
  getInDetail,
  getPostListByDepId,
  addStaff,
  deleteStaff,
  getBreadcrumbs,
  updateStaff,
  getShangJiJiGouList,
  DelRoom
} from "./room";

import {
  getUserList,
} from "../../user/user";


export default {
  data() {
    return {
      query: {
        //左上角查询input
        name: "",
      },
      //地图相关参数 START
      Marker: null,
      map: null,
      //地图相关参数 END
      options: [],
      fatherAgenciesOptionData: [],
      fatherCompanyIdData: [],
      superAdministratorIdData: [],
      authenticationStatusData: [
        { name: '未认证', id: '0' },
        { name: '已认证', id: '1' },
      ],
      updateStaffId: 0,
      dialogFormVisible: false, //控制弹框开关
      formLabelWidth: "120px", //控制前面label的宽度
      reinsertForm: {
        shortName: '',
        superAdministratorId: '',
        type: '',
        fatherCompanyId: '',
        criCode: '',
        contactName: '',
        telephoneNumber: '',
        authenticationStatus: '',
        criLng: '',
        criLat: '',
      },
      insertRules: {
        phoneNumber: [
          {
            required: true,
            message: "手机号不能为空",
            trigger: "blur",
          },
        ],
        name: [
          {
            required: true,
            message: "设备名称不能为空",
            trigger: "blur",
          },
        ],
      },
      operateType: 'insert',
      genderListData: [
        { id: '0', name: "女" }, { id: '1', name: "男" }
      ],
      fatherAgenciesOptionData: [],
      typeOptionData: [],
      agencyQuery: {
        name: "",
      },
      superAdminQuery: {
        userAccount: "",
        userName: ""
      },
      userQuery: {
        userAccount: "",
        userName: ""
      },
      insertUserQuery: {
        userAccount: "",
        userName: "",
        agencyDepartmentId: "",
        agencyPostId: "",
      },
      reinsertForm: {
        confirmType: 'insert',
      },
      breadcrumbsData: [], //面包屑数据
      agencyData: [], //下级机构数据
      userData: [], //已新增员工数据
      depmentManageData: [], //部门数据
      agencyPostListData: [], //岗位数据
      agencyPostDisabled: true, //岗位下拉框
      multipleSelection: [],
      pageNum: 0,
      pageSize: 10,
      totalSize: 0,
      unitCodeData: [
        { name: "1单元", type: 1 },
        { name: "2单元", type: 2 },
        { name: "3单元", type: 3 },
        { name: "4单元", type: 4 },
        { name: "5单元", type: 5 },
        { name: "6单元", type: 6 },
        { name: "7单元", type: 7 },
        { name: "8单元", type: 8 },
      ],
    }
  },

  activated() {
    this.getAgencyInfo(this.$route.query.id);
    this.operateType = 'binding'

    //刚进入页面加载
    this.getFatherAgenciesOptionData("");
    //面包屑
    // this.getBreadcrumbsData();

  },
  async mounted() {
    //初始化选项数据
    this.getAgencyTypeOptionData();


  },
  methods: {
    // 打开新增楼宇页面
    openForm() {
      this.$router.push({
        path: '/room/roomInsert',
        query: {
          operateType: 'insert',
          id: this.$route.query.id
        }
      })
    },
    //打开楼宇详情
    openDetailPage(row) {
      var id = row.id;
      this.$router.push({
        path: '/room/roomDetail',
        query: { id: id }
      }, () => {
        // location.reload();//刷新页面
      })
    },

    //删除房间
    deleteAgencyById(row) {
      console.log('删除房间');
      this.$confirm('确定要删除该楼宇信息吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        let res = await DelRoom(row.id)
        console.log(res, '删除楼宇');
        if (res.data.code == 200) {
          this.$message({
            message: "删除成功",
            type: "success"
          });
        } else {
          this.$message({
            message: res.data.message,
            type: "warning"
          });
        }

      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    },
    // 定位详细坐标
    positioning(val) {

      // 设置中心点
      this.map.setCenter([val.lon, val.lat])

      // 设置高度
      this.map.setZoom([15])

      // 如果之前添加个散点那么就去除
      if (this.Marker != null) {
        this.Marker.remove()
        console.log('删除marker', this.Marker);
      }

      // 添加散点
      this.Marker = new AMap.Marker({
        position: new AMap.LngLat(val.lon, val.lat),
        title: val.title,
        anchor: 'bottom-center',
      })
      this.map.add(this.Marker);
    },
    ShowMap(val) {
      let that = this
      this.$nextTick(() => {
        // 如果地图为空 则初始化地图
        if (this.map == null) {
          AMapLoader.load({
            key: "b59ffa4664995330f554d4aedc02b03c", // 申请好的Web端开发者Key，首次调用 load 时必填
            version: "2.0", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
            plugins: [], // 需要使用的的插件列表，如比例尺'AMap.Scale'等
          })
            .then((AMap) => {
              that.map = new AMap.Map("container", {
                // 设置地图容器id
                // viewMode: "3D", // 是否为3D地图模式
                // zoom: 11, // 初始化地图级别
                // center: [116.397428, 39.90923], // 初始化地图中心点位置
              });
              that.positioning(val)
            })
            .catch((e) => {
              console.log(e);
            });
        } else {
          this.positioning(val)
        }
      })
    },
    handleChange() {

    },


    /**
     *  上一页
     */
    goBack() {
      this.$router.back(-1);
    },

    /**
     * 获取上级机关列表
     */
    async getFatherAgenciesOptionData(name) {
      // 上级机构信息
      let ShangJiJiGouList = await getShangJiJiGouList()
      this.fatherCompanyIdData = []
      console.log(ShangJiJiGouList, '上级机构列表');
      ShangJiJiGouList.forEach(el => {
        this.fatherCompanyIdData.push({
          name: el.shortName,
          type: el.id
        })
      })
      this.fatherCompanyIdData.unshift({
        name: '无',
        type: 0
      })
      // 机构type类型获取
      this.fatherAgenciesOptionData = [
        { name: "物业公司", type: '1' },
        { name: "其他机构", type: '2' }
      ];
      // 获取管理员信息
      this.superAdministratorIdData = [
        { name: '超级管理员', type: 0 },
        { name: '普通管理员', type: 1 }
      ]
    },


    /**
     * 获取类型字典数据
     */
    getAgencyTypeOptionData() {
      getDictionaryList("agency_type").then((res) => {
        this.typeOptionData = res.data;
      })
    },



    // 获取房间详情
    getAgencyInfo(id) {
      getInDetail(id).then((res) => {
        console.log(res, '房间详情');
        for (let i in res) {
          if (res[i] == 0 && i != 'isPublic'&& i!='hasOwnershipCertificate') { //isPublic字段，其他所有字段为0都设置为空字符串
            res[i] = ''
          }
        }
        this.reinsertForm = res
      })
    },











    //查询岗位
    getPostListByDepId() {
      getPostListByDepId(
        this.insertUserQuery.agencyDepartmentId[this.insertUserQuery.agencyDepartmentId.length - 1],
      ).then((res) => {
        this.agencyPostListData = res.data;
      });
    },
    //部门选择变动事件
    departmentChangeEvent() {
      if (this.insertUserQuery.agencyDepartmentId.length > 0) {
        this.agencyPostDisabled = false;
      } else {
        this.agencyPostDisabled = true;
      }
      this.getPostListByDepId();


    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    //添加员工
    addStaff() {
      var agencyId = this.$route.query.id;
      var depIds = this.insertUserQuery.agencyDepartmentId;
      var postIds = this.insertUserQuery.agencyPostId;
      if (this.multipleSelection.length == 0) {
        this.$message({
          message: '请先选择至少一个账号进行绑定',
          type: "warning",
        });
        return;
      }
      if (depIds == "") {
        this.$message({
          message: '请选择部门',
          type: "warning",
        });
        return;
      }
      if (postIds == "") {
        this.$message({
          message: '请选择岗位',
          type: "warning",
        });
        return;
      }


      var tempUserId = "";
      if (this.multipleSelection) {
        this.multipleSelection.forEach(row => {
          tempUserId = tempUserId + "," + row.id
        });
        var userId = tempUserId.substring(1)



        addStaff(agencyId, userId, depIds, postIds).then((res) => {
          if (res.code == 200) {
            this.$message({
              message: '添加员工成功',
              type: 'success'
            });
            this.dialogFormVisible = false

          } else {
            this.$message({
              message: res.message,
              type: "warning",
            });
          }
        });
      }
    },
    //删除员工
    deleteStaffById(row) {
      var staffId = row.id;
      this.$confirm("确认删除该员工吗?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {

        deleteStaff(staffId).then((res) => {
          if (res.code == 200) {
            this.$message({
              message: '删除成功',
              type: 'success'
            });
          } else {
            this.$message({
              message: res.message,
              type: "warning",
            });
          }
        });

      }).catch(() => {
        this.$message({
          type: "info",
          message: "已取消删除",
        });
        return;
      });

    },

    //查询面包屑数据
    getBreadcrumbsData() {
      console.log(this, '??????');
      var agencyId = this.$route.query.id;

      getBreadcrumbs(agencyId).then((res) => {
        console.log(res, '面包屑数据');
        let arr = []
        res.forEach(el => {
          if (el != null) {
            arr.push(el)
          }
        })
        this.breadcrumbsData = arr;
      });

    },

    tiktak(id) {
      this.$router.replace({
        path: '/residential/reDetail',
        query: { id: id }
      }, () => {
        location.reload();//刷新页面
      })

    },



    updateStaff() {
      var agencyId = this.$route.query.id;
      var depIds = this.insertUserQuery.agencyDepartmentId;
      var postIds = this.insertUserQuery.agencyPostId;

      if (this.multipleSelection.length == 0) {
        this.$message({
          message: '请先选择至少一个账号进行绑定',
          type: "warning",
        });
        return;
      }
      if (depIds == "") {
        this.$message({
          message: '请选择部门',
          type: "warning",
        });
        return;
      }
      if (postIds == "") {
        this.$message({
          message: '请选择岗位',
          type: "warning",
        });
        return;
      }


      var tempUserId = "";
      if (this.multipleSelection) {


        if (this.multipleSelection.length > 1) {
          this.$message({
            message: '只能选一个账号进行修改',
            type: "warning",
          });
          return;
        }


        this.multipleSelection.forEach(row => {
          tempUserId = tempUserId + "," + row.id
        });
        var userId = tempUserId.substring(1)



        updateStaff(this.updateStaffId, agencyId, userId, depIds, postIds).then((res) => {
          if (res.code == 200) {
            this.$message({
              message: '修改成功',
              type: 'success'
            });
            this.dialogFormVisible = false
            this.$nextTick(() => {
            })

          } else {
            this.$message({
              message: res.message,
              type: "warning",
            });
          }
        });
      }
    },



  }
};
</script>
<style lang="less" scoped>
.mapStyle {
  height: 350px;
  width: 100%;

  #container {
    padding: 0px;
    margin: 0px;
    width: 100%;
    height: 100%;
  }
}

.wholePage {
  margin-top: 50px;
  margin-left: 130px;
  height: 50%;
}

.breadcrumbs {
  margin-top: 20px;
  margin-left: 13px;
  height: 50%;
}

.menuTable {
  margin-top: 40px;
}

.el-table .warning-row {
  background: oldlace;
}

.el-table .success-row {
  background: #f0f9eb;
}

.menuTable .cell {
  text-align: center;
}

.findValue {
  width: 13%;
  margin-top: 20px;
  margin-left: 15px;
}

.operation {
  margin-right: 50px;
  float: right;
  margin-top: 20px;
}

.formStyle {
  width: 1780px;
  margin: 20px auto;
}

.formItemStyle {
  margin-bottom: 28px;
  margin-left: 22px;
}

.pageFooter {
  margin-top: 3%;
  margin-left: 40%;
}

.pageFooterFather {
  top: 84%;
  position: relative;
  width: 100%;
}

.el-cascader-menu {
  height: fit-content;
  width: fit-content;
}


.birthdayDateItemStyle {
  margin-bottom: 28px;
  margin-left: 22px;
}
</style>